<template>
  <el-row v-if="active" type="flex" justify="center" style="margin-top:10px">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </el-row>
</template>
<script>
export default {
  name: 'PaginationAlt',
  props: {
    total: {
      type: Number,
      required: true
    },
    config: {
      type: Object,
      default: () => ({
        _start: 0,
        _limit: 2
      })
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 2,
      active: true
    }
  },
  created() {
    this.pageSize = this.config._limit
    this.currentPage = Math.floor(this.config._start / this.config._limit) + 1
  },
  methods: {
    currentChange(val) {
      this.$emit('current-change', val)
    },
    sizeChange(val) {
      this.$emit('size-change', val)
    }
  }
}
</script>
<style lang="">

</style>
